<template>
  <div class="worldmap">
    <!-- 初始化echarts -->
    <div class="center" align='center' ref='mapbox' style="height:750px;"></div>
  </div>
</template>


<script>
import echarts from 'echarts'
import jsonp from 'jsonp'
import 'echarts/map/js/world.js' //import世界地图

const nameMap = { //由于原地图是英文，所以需要映射成中文
  'Singapore': '新加坡',
  'Dominica': '多米尼加',
  'Palestine': '巴勒斯坦',
  'Bahamas': '巴哈马',
  'Timor-Leste': '东帝汶',
  'Afghanistan': '阿富汗',
  'Guinea-Bissau': '几内亚比绍',
  "Côte d'Ivoire": '科特迪瓦',
  'Siachen Glacier': '锡亚琴冰川',
  "Br. Indian Ocean Ter.": '英属印度洋领土',
  'Angola': '安哥拉',
  'Albania': '阿尔巴尼亚',
  'United Arab Emirates': '阿联酋',
  'Argentina': '阿根廷',
  'Armenia': '亚美尼亚',
  'Fr. S. Antarctic Lands': '法属南半球和南极领地',
  'Australia': '澳大利亚',
  'Austria': '奥地利',
  'Azerbaijan': '阿塞拜疆',
  'Burundi': '布隆迪',
  'Belgium': '比利时',
  'Benin': '贝宁',
  'Burkina Faso': '布基纳法索',
  'Bangladesh': '孟加拉国',
  'Bulgaria': '保加利亚',
  'The Bahamas': '巴哈马',
  'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
  'Belarus': '白俄罗斯',
  'Belize': '伯利兹',
  'Bermuda': '百慕大',
  'Bolivia': '玻利维亚',
  'Brazil': '巴西',
  'Brunei': '文莱',
  'Bhutan': '不丹',
  'Botswana': '博茨瓦纳',
  'Central African Rep.': '中非',
  'Canada': '加拿大',
  'Switzerland': '瑞士',
  'Chile': '智利',
  'China': '中国',
  'Ivory Coast': '象牙海岸',
  'Cameroon': '喀麦隆',
  'Dem. Rep. Congo': '刚果民主共和国',
  'Congo': '刚果',
  'Colombia': '哥伦比亚',
  'Costa Rica': '哥斯达黎加',
  'Cuba': '古巴',
  'N. Cyprus': '北塞浦路斯',
  'Cyprus': '塞浦路斯',
  'Czech Rep.': '捷克',
  'Germany': '德国',
  'Djibouti': '吉布提',
  'Denmark': '丹麦',
  'Algeria': '阿尔及利亚',
  'Ecuador': '厄瓜多尔',
  'Egypt': '埃及',
  'Eritrea': '厄立特里亚',
  'Spain': '西班牙',
  'Estonia': '爱沙尼亚',
  'Ethiopia': '埃塞俄比亚',
  'Finland': '芬兰',
  'Fiji': '斐济',
  'Falkland Islands': '福克兰群岛',
  'France': '法国',
  'Gabon': '加蓬',
  'United Kingdom': '英国',
  'Georgia': '格鲁吉亚',
  'Ghana': '加纳',
  'Guinea': '几内亚',
  'Gambia': '冈比亚',
  'Guinea Bissau': '几内亚比绍',
  'Eq. Guinea': '赤道几内亚',
  'Greece': '希腊',
  'Greenland': '格陵兰',
  'Guatemala': '危地马拉',
  'French Guiana': '法属圭亚那',
  'Guyana': '圭亚那',
  'Honduras': '洪都拉斯',
  'Croatia': '克罗地亚',
  'Haiti': '海地',
  'Hungary': '匈牙利',
  'Indonesia': '印度尼西亚',
  'India': '印度',
  'Ireland': '爱尔兰',
  'Iran': '伊朗',
  'Iraq': '伊拉克',
  'Iceland': '冰岛',
  'Israel': '以色列',
  'Italy': '意大利',
  'Jamaica': '牙买加',
  'Jordan': '约旦',
  'Japan': '日本',
  'Kazakhstan': '哈萨克斯坦',
  'Kenya': '肯尼亚',
  'Kyrgyzstan': '吉尔吉斯斯坦',
  'Cambodia': '柬埔寨',
  'Korea': '韩国',
  'Kosovo': '科索沃',
  'Kuwait': '科威特',
  'Lao PDR': '老挝',
  'Lebanon': '黎巴嫩',
  'Liberia': '利比里亚',
  'Libya': '利比亚',
  'Sri Lanka': '斯里兰卡',
  'Lesotho': '莱索托',
  'Lithuania': '立陶宛',
  'Luxembourg': '卢森堡',
  'Latvia': '拉脱维亚',
  'Morocco': '摩洛哥',
  'Moldova': '摩尔多瓦',
  'Madagascar': '马达加斯加',
  'Mexico': '墨西哥',
  'Macedonia': '马其顿',
  'Mali': '马里',
  'Myanmar': '缅甸',
  'Montenegro': '黑山',
  'Mongolia': '蒙古',
  'Mozambique': '莫桑比克',
  'Mauritania': '毛里塔尼亚',
  'Malawi': '马拉维',
  'Malaysia': '马来西亚',
  'Namibia': '纳米比亚',
  'New Caledonia': '新喀里多尼亚',
  'Niger': '尼日尔',
  'Nigeria': '尼日利亚',
  'Nicaragua': '尼加拉瓜',
  'Netherlands': '荷兰',
  'Norway': '挪威',
  'Nepal': '尼泊尔',
  'New Zealand': '新西兰',
  'Oman': '阿曼',
  'Pakistan': '巴基斯坦',
  'Panama': '巴拿马',
  'Peru': '秘鲁',
  'Philippines': '菲律宾',
  'Papua New Guinea': '巴布亚新几内亚',
  'Poland': '波兰',
  'Puerto Rico': '波多黎各',
  'Dem. Rep. Korea': '朝鲜',
  'Portugal': '葡萄牙',
  'Paraguay': '巴拉圭',
  'Qatar': '卡塔尔',
  'Romania': '罗马尼亚',
  'Russia': '俄罗斯',
  'Rwanda': '卢旺达',
  'W. Sahara': '西撒哈拉',
  'Saudi Arabia': '沙特阿拉伯',
  'Sudan': '苏丹',
  'S. Sudan': '南苏丹',
  'Senegal': '塞内加尔',
  'Solomon Is.': '所罗门群岛',
  'Sierra Leone': '塞拉利昂',
  'El Salvador': '萨尔瓦多',
  'Somaliland': '索马里兰',
  'Somalia': '索马里',
  'Serbia': '塞尔维亚',
  'Suriname': '苏里南',
  'Slovakia': '斯洛伐克',
  'Slovenia': '斯洛文尼亚',
  'Sweden': '瑞典',
  'Swaziland': '斯威士兰',
  'Syria': '叙利亚',
  'Chad': '乍得',
  'Togo': '多哥',
  'Thailand': '泰国',
  'Tajikistan': '塔吉克斯坦',
  'Turkmenistan': '土库曼斯坦',
  'East Timor': '东帝汶',
  'Trinidad and Tobago': '特里尼达和多巴哥',
  'Tunisia': '突尼斯',
  'Turkey': '土耳其',
  'Tanzania': '坦桑尼亚',
  'Uganda': '乌干达',
  'Ukraine': '乌克兰',
  'Uruguay': '乌拉圭',
  'United States': '美国',
  'Uzbekistan': '乌兹别克斯坦',
  'Venezuela': '委内瑞拉',
  'Vietnam': '越南',
  'Vanuatu': '瓦努阿图',
  'West Bank': '西岸',
  'Yemen': '也门',
  'South Africa': '南非',
  'Zambia': '赞比亚',
  'Zimbabwe': '津巴布韦',
  'Comoros': '科摩罗',
  'Liechtenstein': '列支敦士登',
  'Aland': '奥兰群岛',
  'Andorra': '安道尔',
  'American Samoa': '美属萨摩亚群岛',
  'Antigua and Barb': '安提瓜和巴布达',
  'Bahrain': '巴林',
  'Barbados': '巴巴多斯',
  'Cape Verde': '佛得角共和国',
  'Curaçao': '库拉索',
  'Cayman Is.': '开曼群岛',
  'Falkland Is.': '福克兰群岛',
  'Faeroe Is.': '法罗群岛',
  'Micronesia': '密克罗尼西亚联邦',
  'Grenada': '格林纳达',
  'Guam': '关岛',
  'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
  'Isle of Man': '马恩岛',
  'Jersey': '泽西岛',
  'Kiribati': '基里巴斯共和国',
  'Saint Lucia': '圣卢西亚',
  'Malta': '马耳他共和国',
  'N. Mariana Is.': '马里亚纳群岛',
  'Montserrat': '蒙特塞拉特岛',
  'Mauritius': '毛里求斯',
  'Niue': '纽埃',
  'Palau': '帕劳共和国',
  'Fr. Polynesia': '法属波利尼西亚',
  'Antigua and Barb.': '安提瓜和巴布达',
  'Dominican Rep.': '多米尼加',
  'S. Geo. and S. Sandw. Is.': '南乔治亚和南桑德威奇群岛',
  'Saint Helena': '圣赫勒拿岛',
  'St. Pierre and Miquelon': '圣皮埃尔和密特隆岛',
  'São Tomé and Principe': '圣多美和普林西比',
  'Seychelles': '塞舌尔共和国',
  'Turks and Caicos Is.': '特克斯和凯科斯群岛',
  'Tonga': '汤加',
  'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
  'U.S. Virgin Is.': '美属维京群岛',
  'Samoa': '萨摩亚'
}

const option = {
  title: {
    text: '全球疫情', 
    subtext: '累计确诊病例数，包含治愈、死亡',
    x: 'center',
    //itemGap: 10,
    //textAlign: 'middle',
    textStyle: {
      fontSize: '24',
      color: 'black'
    },
    subtextStyle: {
      fontSize: 18,
    }
  },

  visualMap: [{
    type: 'piecewise',
    show: true,
    pieces: [
      //图例
      {min: 1000000},
      {min: 100000, max: 999999},
      {min: 10000, max: 99999},
      {min: 1000, max: 9999},
      {min: 100, max: 999},
      {min: 10, max: 99},
      {min: 1, max: 9},
      {value: 0, color: 'lightgray'}
      ],
      //align: 'right',
      //orient: 'horizontal'
      //showLabel: false
      inRange: {
        symbol: 'circle',
        // symbolSize: ,
        color: ['#ffefd5', '#8b0000']
      },
      itemWidth: 20,
      itemHeight: 10
  }],

  tooltip:{
    trigger: 'item' //提示框
  },

  toolbox: {
    show: true,
    //orient: 'vertical',
    itemSize: 25,
    itemGap: 20,
    feature: {
      dataView: {readOnly: true},
      saveAsImage: {
        name: "世界疫情地图"
      }
    }
  },
  
  

  series: [{
    name: "确诊人数",
    type: 'map' , //echats要渲染的是地图类型
    map: 'world', //渲染世界地图
    nameMap: nameMap,
    label: {
      //控制对应地区的汉字
      show: false,
      color: 'black', //控制地区字体颜色
      fontSize: 12
    },
    data: [
      //展示后台数据
      {name: '', value: ''}
    ],
    itemStyle: {
      //地图区域
      areaColor: 'lightgray'
    },
    //roam: 'scale', //用户可根据滑轮缩放地图
    zoom: 1.0, //放大或缩小地图
    emphasis: {
      //控制高亮区域：鼠标位置
      label: {
        color: 'black',
        fontSize: 14,
      },
      itemStyle: {
        areaColor: "#83b5e7"
      }
    },
  }]
  
}

export default {
    name: 'worldMap',   
    mounted() {
    this.get_Data(); 
    this.mychart = echarts.init(this.$refs.mapbox);
    this.mychart.setOption(option);
    },
    
    methods: {
      get_Data(){ //使用数据接口获取json数据包
      jsonp('https://gwpre.sina.cn/interface/fymap2020_data.json?_=1590550575291&callback=dataAPIData',
      {}, (err, data) => {
        if(!err){
          //代表请求数据成功
          console.log(data);
          let list = data.data.worldlist.map(item => ({name:item.name, value:item.value}));
          option.series[0].data = list;
          this.mychart.setOption(option); //DOM已经渲染完成才能执行
        }
      })
    }
    }
}
</script>

<style>
  #center{
    text-align: center;
    margin:0 auto;
    width: 100%;
    display:inline-block;
  }
</style>